<template>
    <div class="search">
        <el-autocomplete
            style="width: 50%;margin-right: 20px"
            clearable
            placeholder="请输入医院名称"
            v-model="hosname"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            @select="goDetail"
        />
        <el-button type="primary" size="default" :icon="Search">
            搜索
        </el-button>
    </div>
</template>

<script setup lang="ts" name="Search">
     // 从外部引入图标
     import {Search} from "@element-plus/icons-vue";
     import { ref } from "vue";
     import {reqHospitalSearch} from '@/api/home'
     import type {HospitalSearch} from '@/api/home/type'
     import {useRouter} from "vue-router";

     // 创建路由对象
     let $router = useRouter();
     // 收集搜索的关键字
     let hosname = ref<string>('');

    const querySearch =async (keyword:string, cb:any) => {
        let result:HospitalSearch = await reqHospitalSearch(keyword);
        // 整理数据，传给组件需要的value值
        let showDatas = result.data.map(item=>{
            return{
                value:item.hosname,
                hoscode:item.hoscode
            }
        });
        cb(showDatas);
    }

    // 点击推荐项触发事件
     const goDetail = (item:any) => {
        // 跳转详情页
        $router.push({path:'/hospital',
            query:{hoscode:item.hoscode}
        });
    }


</script>

<style scoped lang="css">
    .search{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
    }

</style>

